<template>
  <div>
    <div class="flex jc-sb bg-fff pr-20">
      <HeaderTitle :textObj="textObj"></HeaderTitle>
      <el-link @click="handleAdd" type="primary">新增</el-link>
    </div>
    <!-- 搜索栏 -->
    <div class="flex mt-10 items-center bg-fff p-10">
      <span class="fcc mr-10">群组名称：</span>
    <el-input
      v-model="search"
      style="width: 240px"
      size="large"
      placeholder="请输入群组名称"
    />
   <div  class="fcc ml-10 ">
    <el-button  @click="searchData" type="primary">搜索</el-button>
   </div>
      <span class="fcc ml-10 f14">搜索结果：{{ total }}条</span>
    </div>

    <!-- 表格 -->
    <el-table class="mt-10" :data="tableData" stripe style="width: 100%" border>
      <el-table-column
        align="center"
        type="index"
        :index="indexMethod"
        label="序号"
        width="80"
      />
      <el-table-column align="center" prop="groupName" label="群组名称" width="180" />
      <el-table-column align="center" prop="nodeNums" label="传感器节点数量" width="180" />
      <el-table-column align="center" prop="onlineNums" label="在线设备数量" width="180" />
      <el-table-column
        align="center"
        prop="cTime"
        label="创造时间"
        width="180"
        :formatter="formatDate"
      />
      <el-table-column
        align="center"
        prop="uTime"
        label="更新时间"
        width="180"
        :formatter="formatDate"
      />
      <el-table-column
        align="center"
        fixed="right"
        label="操作"
        min-width="120"
      >
        <template #default="scope">
          <el-button
            type="primary"
            :icon="Edit"
            circle
            @click="handleEdit(scope.row, scope.$index)"
          />
          <el-button
            type="danger"
            circle
            :icon="Delete"
            @click="handleDelete(scope.row, scope.$index)"
          />
        </template>
      </el-table-column>
    </el-table>

    <!-- 弹窗 -->
    <el-dialog
      draggable
      align-center
      v-model="Show"
      :title="dialogTitle"
      width="30%"
    >
      <el-form :model="form" label-width="110px">
        <el-form-item label="群组名称">
          <el-input v-model="form.groupName" placeholder="请输入群组名称" />
        </el-form-item>
       
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="Show = false">取消</el-button>
          <el-button type="primary" @click="onSubmit">保存</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 页数 -->
    <div class="fcc bg-fff p-20">
      <el-pagination
        @current-change="onChange"
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="params.pageSize"
      />
    </div>
  </div>
</template>

<script setup>
import {
  $groupAdd,
  $groupList,
  $groupEdit,
  $groupDel,
} from "../../api/index";
import { ref, onMounted } from "vue";
import HeaderTitle from "../../components/HeaderTitle.vue";
import { formatDate } from "../../utils/utils";
import { Edit, Delete,Search } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";

let textObj = {
  title: "设备 ",
  name: "节点群组",
  dsc: "以分组的形式管理节点设备，提供了搜索、添加新的群组、重命名、移动设备等功能。",
};
const tableData = ref([]); // 表格数据
let Show = ref(false); // 编辑弹窗
let dialogTitle = ref('');
// 表单数据
const form = ref({
  id: "",
  groupName: "",
  nodeNums: "",
  onlineNums: "",
});

// 获取表格数据
let params = ref({
  currPage: 1,
  pageSize: 5,
  keyword: "",
});
let total = ref(0);
const onChange = (page) => {
  params.value.currPage = page;
  getList();
};
const getList = async () => {
  let res = await $groupList(params.value);
  tableData.value = res.data;
  total.value = res.total;
};

// 删除
const handleDelete = async (row, index) => {
  try {
    await ElMessageBox.confirm("确定要删除这条数据吗?", "温馨提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
      draggable: true,
    });
    await $groupDel({ id: row.id });
    ElMessage({
      type: "success",
      message: "删除成功",
    });
    // 刷新列表
    getList();
  } catch (error) {
    console.error("删除数据失败:", error);
  }
};
// 新增
const handleAdd = async () => {
  dialogTitle.value = "新增设备组";
  form.value = {
  groupName: "",
  };
  Show.value = true;
};
const groupAdd = () => {
  if (form.value.groupName) {
    $groupAdd({
      groupName: form.value.groupName,
    }).then((res) => {
      ElMessage({
        type: "success",
        message: "新增成功",
      });
      tableData.value.unshift(res.data);
      total.value++;
      Show.value = false;
    });
  } else {
    ElMessage({
      type: "error",
      message: "请输入完整信息",
    });
  }
};
// 编辑
let editIndex = ref(0);
const handleEdit = (row, index) => {
  editIndex.value = index;
  dialogTitle.value = "编辑设备组";
  form.value = {
    id: row.id,
    groupName: row.groupName,
  };
  Show.value = true;
};
const groupEdit = () => {
  if (form.value.groupName ) {
    $groupEdit({
      id: form.value.id,
      groupName: form.value.groupName,
    }).then((res) => {
      ElMessage({
        type: "success",
        message: "编辑成功",
      });
      Show.value = false;
      // 更新表格数据
      tableData.value[editIndex.value].groupName = form.value.groupName;
    });
  } else {
    ElMessage({
      type: "error",
      message: "请输入完整信息",
    });
  }
};
//判断是新增还是编辑
 const onSubmit = () => {
 if(form.value.id){
   groupEdit()
 }else{
   groupAdd()
 }
 }
// 搜索
let search = ref("");
const searchData = () => {
  params.value.keyword = search.value;
  getList();
}
// 定义 indexMethod 函数
const indexMethod = (index) => {
  return index + 1;
};
onMounted(() => {
  getList();
});
</script>

<style>
</style>